import React from 'react';
import { Button, message, Tooltip } from 'antd';
import List from './fieldList';
import CommonListsIndex from '../../../components/CommonLists/index';
import { IS_SYSTEM } from '../../../utils/constant';
import UserAdd from '../../Variable/Field/add';
import services from '../../../services/api';

class RelationComponent extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'field';
    this.listsComponent = List;
    this.editComponent = UserAdd;
    this.queryTableParams = {
      ...props.param,
    };
    this.initQueryPanigation = {
      current_page: 1,
      page_size: 10,
    };
    this.model_width = 600;
  }
  componentDidMount() {
    this.freshQueryList();
  }

  // 列表
  queryList(params) {
    services[this.api].list(params).then((res) => {
      if (res.code === 0) {
        const { list, totalCount } = res.data
        const currentPage = params.current_page
        const page = Math.ceil(totalCount / this.queryPanigation.page_size)
        if (list && totalCount && list.length === 0 && currentPage > page) {
          this.onChangePagination(page, 'current_page')
        } else {
          this.setState({
            ...res.data,
          });
        }
        // this.setState({
        //   ...res.data,
        // });
      } else {
        message.error(res.msg);
      }
    });
  }

  getColumns = () => {
    return [
      {
        title: '序号',
        key: 'index',
        dataIndex: 'index',
        width: 80,
        render: (_, __, index) => index + 1,
      },
      {
        title: '字段名',
        key: 'field_name',
        dataIndex: 'field_name',
        ellipsis: true,
        width: 100,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className="overflowtext">
                <Button type='link' onClick={() => this.showDetail(record)}>
                  {text}
                </Button>
              </div>
            </Tooltip>
          );
        },
      },
      ...(this.props.param.is_system === IS_SYSTEM._FALSE
        ? [
            {
              title: '所属应用',
              key: 'app_name',
              dataIndex: 'app_name',
              ellipsis: true,
              render: (text) => (
                <Tooltip title={text} placement='topLeft'>
                  <div className='overflowtext'>{text}</div>
                </Tooltip>
              ),
            },
            {
              title: '关联产品',
              key: 'product_name',
              dataIndex: 'product_name',
              ellipsis: true,
              render: (text) => (
                <Tooltip title={text} placement='topLeft'>
                  <div className='overflowtext'>{text}</div>
                </Tooltip>
              ),
            },
            {
              title: '关联事件',
              key: 'event_name',
              dataIndex: 'event_name',
              ellipsis: true,
              render: (text) => (
                <Tooltip title={text} placement='topLeft'>
                  <div className='overflowtext'>{text}</div>
                </Tooltip>
              ),
            },
          ]
        : []),
      {
        title: '字段Code',
        key: 'field_code',
        dataIndex: 'field_code',
        ellipsis: true,
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      this.props.param.is_system === IS_SYSTEM._TRUE && {
        title: '数据类型',
        key: 'data_type',
        dataIndex: 'data_type',
        ellipsis: true,
        render: (text) => (
          <Tooltip title={text} placement='topLeft'>
            <div className='overflowtext'>{text}</div>
          </Tooltip>
        ),
      },
      {
        title: '创建/修改人',
        dataIndex: 'create_user_name',
        key: 'create_user_name',
        ellipsis: true,
        render: (_, record) => {
          var content = !!record.update_user_name
            ? `${record.create_user_name}/${record.update_user_name}`
            : `${record.create_user_name}/${record.create_user_name}`;
          return (
            <Tooltip title={content} placement='topLeft'>
              {content}
            </Tooltip>
          );
        },
      },
      {
        title: '修改时间',
        dataIndex: 'update_time',
        key: 'update_time',
        ellipsis: true,
        render: (_, record) => {
          var content = !!record.update_time ? record.update_time : record.create_time;
          return (
            <Tooltip title={content} placement='topLeft'>
              <div className='overflowtext' style={{ width: '100%' }}>
                {content}
              </div>
            </Tooltip>
          );
        },
      },
    ].filter(Boolean);
  };

  render() {
    const ListsComponent = this.listsComponent;

    return (
      <div className='inner-content' style={{ marginTop: '-15px', marginBottom: '30px' }}>
        <ListsComponent
          {...this.state}
          rowKey='field_id'
          queryList={this.freshQueryList}
          columns={this.getColumns()}
          onChangePagination={this.onChangePagination}
        />
      </div>
    );
  }
}

export default RelationComponent;
